<%@ page import="java.util.Map" %>
<%@ page import="java.util.Set" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";


	Map<String,String> pMap= (Map<String, String>) application.getAttribute("pMap");//获取pMap

	Set<String> keys=pMap.keySet();



%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<!--自动补全插件-->
<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>

	<script>
		//将pMap转为json
		var json={

			<%
				for (String key:keys){

					String value=pMap.get(key);

			%>
				"<%=key%>":<%=value%>,

			<%

				}

			%>

		};

		//alert(json)

	/*
		关于阶段和可能性.
			两者是一一对应的关系,一个阶段对应一个可能性。可以将两者想成是键值对的关系，
				阶段是key  可能性是value

				比如
				stage          possibility
				key            value
				01资格审查       10
				02需求分析	    25
				...             ...

				对于以上的这种数据,通过观察得到结论:
					(1)数据量不是很大
					(2)这是一种键值对的关系

					如果同时满足上述两种情况,那么我们将这样的数据保存到数据库表中就没有意义了。
					所以，如果遇到这种情况，我们采用【属性配置文件properties】来进行保存
					文件名:stageTwoPossibility.properties
					01资格审查=10
					02需求分析=25
					...

					这里我们将这个【属性配置文件properties】放入到全局作用域中/服务器缓存
	 */

		$(function () {
	<!--日历控件-->
			$(".time1").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "top-left"
			});
			$(".time2").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "bottom-left"
			});

	<!--自动补全插件-->
			$("#create-customerName").typeahead({
				source: function (query, process) {
					$.get(//ajax的另一种写法
							"tran/getCustomerName.do",//url
							{ "name" : query },//data
							function (data) {//回调函数
								//alert(data);
								/*
									data:
										[{客户名称1},{客户名称2},{客户名称3}...]
								*/
								process(data);
							},
							"json"//dataType
					);
				},
				delay: 1500
			});


//给放大镜绑定事件，用于打开查询市场活动的窗口
			$("#searchBtn").click(function () {
				//alert("事件绑定成功")
				$("#findMarketActivity").modal("show")


				//给查询时候活动的文本框绑定事件
				$("#searchActivity").keydown(function (event) {
					if(event.keyCode==13){
						var aname=$("#searchActivity").val()

						$.ajax({
							url:"tran/searchActivity.do",
							type:"get",
							data:{
								"name":aname
							},
							dataType:"json",
							success:function (resp) {
				/*
					resp:
						[{市场活动1},{市场活动2},{市场活动3}...]
				 */
						var html="";
								$.each(resp,function (i,n) {

									html+='<tr>';
									html+='<td><input type="radio" name="activity" value="'+n.id+'"/></td>';
									html+='<td id="'+n.id+'">'+n.name+'</td>';
									html+='<td>'+n.startDate+'</td>';
									html+='<td>'+n.endDate+'</td>';
									html+='<td>'+n.owner+'</td>';
									html+='</tr>';
								})
							//将模糊查询的结果刷新到查询列表中
							$("#activityList").html(html)


							}
						})


						return false;

					}
				})

			})


//给取消按钮绑定事件,用于关闭查询市场活动的模态窗口.
		$("#returnBtn").click(function () {
			//alert("事件绑定成功")
			$("#findMarketActivity").modal("hide")
		})

//给保存按钮绑定事件,执行将选择的市场活动的名称填充到【市场活动源文本框中】
		$("#saveActivityBtn").click(function () {
			//获取选中的市场活动单选框
			var activityId=$("input[name=activity]:checked").val()
			//alert("选中的市场活动的id"+activityId)

			//将已选中的市场活动的id放入隐藏域
			$("#activity-Id").val(activityId)

			//将已选中的市场活动的名称填充到【市场活动源文本框中】
			//var aname=$("#"+activityId).html()    已选中的市场活动的名称

			$("#create-activitySrc").val($("#"+activityId).html())


			//清空查询文本框
			$("#searchActivity").val("")

			//清空查询到的市场活动列表
			$("#activityList").html("")

			//关闭查询市场活动模态窗口
			$("#findMarketActivity").modal("hide")

		})

//给模糊查询联系人文本框绑定事件,用于打开查询联系人的模态窗口
			$("#contactName").keydown(function (event) {
				if(event.keyCode==13){
					//alert("回车键触发")
				var cname=$("#contactName").val()
					//alert("输入的名称"+cname)

					$.ajax({
						url:"tran/searchContact.do",
						type:"get",
						data:{
							"cname":cname
						},
						dataType:"json",
						success:function (resp) {
			/*
				resp:
					{联系人列表}

			 */
					var html="";

						$.each(resp,function (i,n) {

								html+='	<tr>';
								html+='	<td><input type="radio" name="contact" value="'+n.id+'"/></td>';
								html+='	<td id="'+n.id+'">'+n.fullname+'</td>';
								html+='	<td>'+n.email+'</td>';
								html+='	<td>'+n.mphone+'</td>';
								html+='	</tr>';

						})

							//将查询到的联系人列表局部刷新到页面
							$("#contactList").html(html)

						}
					})


					return false;
				}
			})

//给保存按钮绑定事件，执行将选择的联系人名称填充到【联系人名称文本框中】
			$("#saveContactsBtn").click(function () {
				//alert("事件绑定成功")
				var $contact=$("input[name=contact]:checked")

				if($contact.length==0){
					alert("请选择需要添加的联系人")
				}else {
					var contactId=$($contact[0]).val()
					//alert("选中的联系人的id是"+contactId)

					//将选中的联系人的id放入到隐藏域
					$("#contact-Id").val(contactId)

					//将选中的联系人的名称填充到【联系人名称文本框中】
					$("#create-contactsName").val($("#"+contactId).html())

					//清空查询出来的联系人列表
					$("#contactList").html("")

					//清空查询联系人的文本框
					$("#contactName").val("")

					//关闭查询联系人的模态窗口
					$("#findContacts").modal("hide")

				}

			})


//给阶段959下拉框绑定事件,根据选中的阶段来填写可能性
			$("#create-transactionStage").change(function () {
				//alert("事件绑定成功")

				//获取选中的下拉框
				var stage=$("#create-transactionStage").val()
				//alert(stage)
			/*
				目标:填写【可能性】文本框

				现在阶段我们有了
				阶段和可能性之间的对应关系是map,但是mMap是java语言中的
				所以,我们需要将pMap转为js中的键值对(json)

				我们要做的是将pMap 转换为json
					pMap.put("01资质审查",10)
					pMap.put("02需求分析",25)
						......

				转为
					var json={"01资质审查":10,"02需求分析":25}

			 */
			/*
			   我们现在不能以json.key来获取value
			   因为这个stage是个变量(动态的)

			   	如果是这种情况，我们要使用json[stage]来获取value (json[key])

			 */
			var possibility=json[stage]
			//alert(possibility)

				//为可能性文本框填值
				$("#create-possibility").val(possibility)



			})

//为保存按钮绑定事件,执行交易的添加操作
			$("#saveTranBtn").click(function () {
				alert("事件绑定成功")

				//发出传统请求,提交表单
				$("#tranForm").submit()
			})

		})
//页面加载完毕=======================================================================================
	</script>
</head>
<body>

	<!-- 查找市场活动 -->	
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">

						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询" id="searchActivity">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者12121</td>
							</tr>
						</thead>
						<tbody id="activityList">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>--%>
						</tbody>

					</table>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" id="saveActivityBtn">保存</button>
					<button type="button" class="btn btn-default" id="returnBtn">取消</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->	
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询" id="contactName">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
							<!--隐藏域，用于存放选中的联系人的id-->
							<%--<input type="hidden" id="contact-Id">--%>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="contactList">

							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>--%>
						</tbody>
					</table>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="saveContactsBtn">保存</button>
						<button type="button" class="btn btn-default" id="returnBtn2">取消</button>
					</div>
				</div>
			</div>

		</div>

	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易215</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="saveTranBtn">保存</button>
			<button type="button" class="btn btn-default">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" action="tran/save.do"  id="tranForm" method="post" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionOwner" name="owner">
					<c:forEach items="${requestScope.userList}" var="u">

				<option value="${u.id}" ${sessionScope.user.id eq u.id? "selected":""}>${u.name}</option>

					</c:forEach>

				</select>
			</div>
			<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-amountOfMoney" name="money">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-transactionName" name="name">
			</div>
			<label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control time1" id="create-expectedClosingDate" readonly name="expectDate">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-accountName" class="col-sm-2 control-label">客户名称qqw<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-customerName" placeholder="支持自动补全，输入客户不存在则新建sasa" name="customerName">
			</div>
			<label for="create-transactionStage" class="col-sm-2 control-label">阶段959<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="create-transactionStage" name="stage">
			  	<option></option>
				  <c:forEach items="${applicationScope.stage}" var="s">
					  <option value="${s.value}">${s.text}</option>

				  </c:forEach>
			  	<%--<option>资质审查</option>
			  	<option>需求分析</option>
			  	<option>价值建议</option>
			  	<option>确定决策者</option>
			  	<option>提案/报价</option>
			  	<option>谈判/复审</option>
			  	<option>成交</option>
			  	<option>丢失的线索</option>
			  	<option>因竞争丢失关闭</option>--%>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionType" name="type">
				  <option></option>
					<c:forEach items="${applicationScope.transactionType}" var="t">
						<option value="${t.value}" >${t.text}</option>
					</c:forEach>
				  <%--<option>已有业务</option>
				  <option>新业务</option>--%>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-possibility">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-clueSource">
				  <option></option>
					<c:forEach items="${applicationScope.source}" var="source">

						<option value="${source.value}">${source.text}</option>

					</c:forEach>

				</select>
			</div>
			<!--市场活动源的id  市场活动的id  隐藏域-->
			<input type="hidden" id="activity-Id" name="activityId">
			<!--data-target="#findMarketActivity"-->
			<label for="create-activitySrc" class="col-sm-2 control-label">市场活动源sa&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" id="searchBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-activitySrc">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#findContacts"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<!--联系人名称的id  联系人的id  隐藏域 -->
				<input type="hidden" id="contact-Id" name="contactsId">

				<input type="text" class="form-control" id="create-contactsName">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-describe" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-describe" name="description"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary" name="contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control time2" id="create-nextContactTime" readonly name="nextContactTime">
			</div>
		</div>
		
	</form>
</body>
</html>